<template>
	<view class="register-container">
		<!-- 增强版背景装饰 -->
		<view class="background-decoration">
			<view class="decoration-circle circle-1"></view>
			<view class="decoration-circle circle-2"></view>
			<view class="decoration-circle circle-3"></view>
			<view class="decoration-circle circle-4"></view>
			<view class="floating-particle particle-1"></view>
			<view class="floating-particle particle-2"></view>
			<view class="floating-particle particle-3"></view>
		</view>

		<view class="register-card">
			<!-- 头部区域 -->
			<view class="register-header">
				<view class="header-icon">
					<text class="icon">👤</text>
					<view class="icon-glow"></view>
				</view>
				<text class="title">注册账号</text>
				<text class="subtitle">创建您的智能零售平台账号</text>
			</view>

			<!-- 表单区域 -->
			<view class="register-form">
				<view class="form-row">
					<view class="input-wrapper">
						<view class="input-icon">👤</view>
						<view class="input-container">
							<input class="input" v-model="form.user_name" placeholder="请输入用户名"
								placeholder-class="placeholder" maxlength="10" @focus="onInputFocus('username')"
								@blur="onInputBlur" />
						</view>
						<view class="input-line" :class="{ active: activeInput === 'username' }"></view>
						<text class="tip">用户名2-10位</text>
					</view>
				</view>

				<view class="form-row">
					<view class="input-wrapper">
						<view class="input-icon">🔑</view>
						<view class="input-container">
							<input class="input" v-model="form.user_password" password placeholder="请输入密码"
								placeholder-class="placeholder" @confirm="handleRegister"
								@focus="onInputFocus('password')" @blur="onInputBlur" />
						</view>
						<view class="input-line" :class="{ active: activeInput === 'password' }"></view>
						<text class="tip">密码至少6位</text>
					</view>
				</view>

				<view class="form-row">
					<view class="input-wrapper">
						<view class="input-icon">✅</view>
						<view class="input-container">
							<input class="input" v-model="form.confirm_password" password placeholder="请再次输入密码"
								placeholder-class="placeholder" @confirm="handleRegister"
								@focus="onInputFocus('confirm')" @blur="onInputBlur" />
						</view>
						<view class="input-line" :class="{ active: activeInput === 'confirm' }"></view>
					</view>
				</view>

				<view class="form-row">
					<view class="input-wrapper">
						<view class="input-icon">📱</view>
						<view class="input-container">
							<input class="input" v-model="form.user_phone" placeholder="请输入手机号"
								placeholder-class="placeholder" type="number" maxlength="11"
								@focus="onInputFocus('phone')" @blur="onInputBlur" />
						</view>
						<view class="input-line" :class="{ active: activeInput === 'phone' }"></view>
					</view>
				</view>

				<!-- 注册按钮 -->
				<button class="register-btn" :loading="loading" @click="handleRegister" :disabled="!canRegister">
					<text class="btn-text">{{ loading ? '注册中...' : '立即注册' }}</text>
					<view class="btn-glow"></view>
					<view class="btn-wave" v-if="!loading"></view>
				</button>

				<!-- 登录链接 -->
				<view class="login-link">
					<text class="link-text">已有账号？</text>
					<view class="link-container" @click="navigateToLogin">
						<text class="link">立即登录</text>
						<view class="link-underline"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部装饰 -->
		<view class="bottom-decoration">
			<view class="wave wave-1"></view>
			<view class="wave wave-2"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				activeInput: '',
				form: {
					user_name: '',
					user_password: '',
					confirm_password: '',
					user_phone: ''
				}
			}
		},
		computed: {
			canRegister() {
				return this.form.user_name.trim() &&
					this.form.user_password.trim() &&
					this.form.confirm_password.trim() &&
					this.form.user_phone.trim() &&
					!this.loading
			}
		},
		methods: {
			onInputFocus(field) {
				this.activeInput = field;
			},

			onInputBlur() {
				this.activeInput = '';
			},

			validateForm() {
				if (!this.form.user_name.trim()) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return false
				}

				if (this.form.user_name.length < 2 || this.form.user_name.length > 10) {
					uni.showToast({
						title: '用户名2-10位',
						icon: 'none'
					})
					return false
				}

				if (!this.form.user_password.trim()) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return false
				}

				if (this.form.user_password.length < 6) {
					uni.showToast({
						title: '密码至少6位',
						icon: 'none'
					})
					return false
				}

				if (this.form.user_password !== this.form.confirm_password) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					return false
				}

				if (!this.form.user_phone.trim()) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return false
				}

				if (!/^1[3-9]\d{9}$/.test(this.form.user_phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return false
				}

				return true
			},

			async handleRegister() {
				if (!this.validateForm()) {
					return
				}

				this.loading = true
				try {
					const registerData = {
						user_name: this.form.user_name,
						user_password: this.form.user_password,
						user_phone: this.form.user_phone
					}

					// 使用 Promise 包装确保一致的返回值
					const response = await new Promise((resolve, reject) => {
						uni.request({
							url: 'http://localhost:8000/api/v1/users/register',
							method: 'POST',
							data: registerData,
							header: {
								'Content-Type': 'application/json'
							},
							success: (res) => resolve(res),
							fail: (err) => reject(err)
						})
					})

					console.log('注册响应:', response)

					// 统一处理所有响应状态
					if (response.statusCode === 200) {
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						// 统一处理400和500错误，根据错误内容显示友好提示
						let errorMsg = response.data?.detail || '注册失败'

						// 关键：根据错误内容识别具体错误类型，无论状态码是400还是500
						if (this.isPhoneDuplicateError(errorMsg)) {
							errorMsg = '手机号已被注册'
						} else if (this.isUsernameDuplicateError(errorMsg)) {
							errorMsg = '用户名已存在'
						} else if (this.isDuplicateEntryError(errorMsg)) {
							errorMsg = '用户信息已存在'
						}

						uni.showToast({
							title: errorMsg,
							icon: 'none',
							duration: 4000
						})
					}
				} catch (error) {
					console.error('注册错误:', error)
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			/**
			 * 判断是否为手机号重复错误
			 */
			isPhoneDuplicateError(errorMsg) {
				const phoneErrorPatterns = [
					'手机号已被注册',
					'user_phone',
					'unique_user_phone',
					'Duplicate entry',
					'1062'
				]
				return phoneErrorPatterns.some(pattern =>
					errorMsg.toLowerCase().includes(pattern.toLowerCase())
				)
			},

			/**
			 * 判断是否为用户名重复错误
			 */
			isUsernameDuplicateError(errorMsg) {
				const usernameErrorPatterns = [
					'用户名已存在',
					'user_name',
					'username'
				]
				return usernameErrorPatterns.some(pattern =>
					errorMsg.toLowerCase().includes(pattern.toLowerCase())
				)
			},

			/**
			 * 判断是否为数据库重复条目错误
			 */
			isDuplicateEntryError(errorMsg) {
				return errorMsg.includes('1062') || errorMsg.includes('Duplicate entry')
			},

			navigateToLogin() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.register-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #6A0DAD 0%, #8A2BE2 30%, #9370DB 70%, #DA70D6 100%);
		padding-top: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	/* 增强版背景装饰 */
	.background-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.decoration-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		animation: float 15s infinite ease-in-out;
	}

	.circle-1 {
		width: 300rpx;
		height: 300rpx;
		top: 10%;
		left: -100rpx;
		animation-delay: 0s;
	}

	.circle-2 {
		width: 200rpx;
		height: 200rpx;
		bottom: 20%;
		right: -50rpx;
		animation-delay: 5s;
	}

	.circle-3 {
		width: 150rpx;
		height: 150rpx;
		top: 50%;
		left: 80%;
		animation-delay: 10s;
	}

	.circle-4 {
		width: 180rpx;
		height: 180rpx;
		top: 70%;
		left: 10%;
		animation-delay: 3s;
	}

	.floating-particle {
		position: absolute;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		animation: float-particle 8s infinite ease-in-out;
	}

	.particle-1 {
		width: 20rpx;
		height: 20rpx;
		top: 30%;
		left: 20%;
		animation-delay: 0s;
	}

	.particle-2 {
		width: 15rpx;
		height: 15rpx;
		top: 60%;
		left: 70%;
		animation-delay: 2s;
	}

	.particle-3 {
		width: 25rpx;
		height: 25rpx;
		top: 80%;
		left: 30%;
		animation-delay: 4s;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0) rotate(0deg) scale(1);
		}

		33% {
			transform: translateY(-30rpx) rotate(120deg) scale(1.1);
		}

		66% {
			transform: translateY(20rpx) rotate(240deg) scale(0.9);
		}
	}

	@keyframes float-particle {

		0%,
		100% {
			transform: translateY(0) translateX(0);
			opacity: 0.5;
		}

		50% {
			transform: translateY(-40rpx) translateX(20rpx);
			opacity: 1;
		}
	}

	.register-card {
		width: 600rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 32rpx;
		padding: 60rpx 50rpx;
		box-shadow: 0 25rpx 60rpx rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		position: relative;
		z-index: 2;
	}

	.register-header {
		text-align: center;
		margin-bottom: 70rpx;
	}

	.header-icon {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto 35rpx;
	}

	.icon {
		font-size: 50rpx;
		position: relative;
		z-index: 2;
		display: block;
		text-align: center;
		line-height: 100rpx;
	}

	.icon-glow {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 140rpx;
		height: 140rpx;
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		border-radius: 50%;
		opacity: 0.3;
		filter: blur(20rpx);
		animation: glow-pulse 2s ease-in-out infinite;
	}

	@keyframes glow-pulse {

		0%,
		100% {
			opacity: 0.2;
			transform: translate(-50%, -50%) scale(1);
		}

		50% {
			opacity: 0.4;
			transform: translate(-50%, -50%) scale(1.1);
		}
	}

	.title {
		display: block;
		font-size: 52rpx;
		font-weight: 700;
		color: #1e293b;
		margin-bottom: 20rpx;
		background: linear-gradient(135deg, #1e293b, #8A2BE2);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.subtitle {
		font-size: 28rpx;
		color: #64748b;
		letter-spacing: 1rpx;
		font-weight: 500;
	}

	.register-form {
		display: flex;
		flex-direction: column;
	}

	.form-row {
		margin-bottom: 45rpx;
	}

	.input-wrapper {
		position: relative;
	}

	.input-icon {
		position: absolute;
		left: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 32rpx;
		z-index: 2;
		color: #8A2BE2;
	}

	.input-container {
		position: relative;
	}

	.input {
		height: 90rpx;
		border: 2rpx solid #e2e8f0;
		border-radius: 20rpx;
		padding: 0 80rpx 0 80rpx;
		font-size: 30rpx;
		background: rgba(248, 250, 252, 0.8);
		width: 100%;
		box-sizing: border-box;
		transition: all 0.4s ease;
		color: #1e293b;
		font-weight: 500;
	}

	.input:focus {
		border-color: #8A2BE2;
		background: #fff;
		box-shadow: 0 8rpx 32rpx rgba(138, 43, 226, 0.15);
		transform: translateY(-2rpx);
	}

	.input-line {
		position: absolute;
		bottom: 0;
		left: 80rpx;
		right: 0;
		height: 3rpx;
		background: linear-gradient(90deg, #8A2BE2, #9370DB);
		transform: scaleX(0);
		transition: transform 0.4s ease;
		border-radius: 3rpx;
	}

	.input-line.active {
		transform: scaleX(1);
	}

	.placeholder {
		color: #94a3b8;
		font-size: 30rpx;
		font-weight: 400;
	}

	.tip {
		display: block;
		font-size: 24rpx;
		color: #8A2BE2;
		margin-top: 12rpx;
		font-weight: 500;
		padding-left: 80rpx;
	}

	/* 注册按钮 */
	.register-btn {
		height: 100rpx;
		background: linear-gradient(135deg, #8A2BE2 0%, #9370DB 100%);
		color: #fff;
		font-size: 34rpx;
		font-weight: 600;
		border-radius: 20rpx;
		border: none;
		margin-top: 30rpx;
		width: 100%;
		transition: all 0.4s ease;
		box-shadow: 0 12rpx 30rpx rgba(138, 43, 226, 0.4);
		position: relative;
		overflow: hidden;
	}

	.btn-text {
		position: relative;
		z-index: 2;
	}

	.btn-glow {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, #9370DB 0%, #8A2BE2 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.btn-wave {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.3);
		transform: translate(-50%, -50%);
		animation: wave 1.5s ease-out infinite;
	}

	@keyframes wave {
		0% {
			width: 0;
			height: 0;
			opacity: 1;
		}

		100% {
			width: 300rpx;
			height: 300rpx;
			opacity: 0;
		}
	}

	.register-btn:active {
		transform: translateY(3rpx);
		box-shadow: 0 6rpx 20rpx rgba(138, 43, 226, 0.4);
	}

	.register-btn:active .btn-glow {
		opacity: 1;
	}

	.register-btn[disabled] {
		background: #cbd5e1;
		box-shadow: 0 4rpx 15rpx rgba(203, 213, 225, 0.4);
		transform: none;
	}

	.register-btn[loading] {
		opacity: 0.9;
	}

	/* 登录链接 */
	.login-link {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 45rpx;
		font-size: 28rpx;
		color: #64748b;
		gap: 16rpx;
	}

	.link-text {
		font-weight: 500;
	}

	.link-container {
		position: relative;
		display: inline-block;
	}

	.link {
		color: #8A2BE2;
		font-weight: 700;
		position: relative;
		z-index: 1;
	}

	.link-underline {
		position: absolute;
		bottom: -4rpx;
		left: 0;
		width: 100%;
		height: 3rpx;
		background: linear-gradient(90deg, #8A2BE2, #9370DB);
		border-radius: 2rpx;
		transform: scaleX(0);
		transition: transform 0.3s ease;
	}

	.link-container:active .link-underline {
		transform: scaleX(1);
	}

	.link-container:active .link {
		opacity: 0.8;
	}

	/* 底部装饰 */
	.bottom-decoration {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		overflow: hidden;
		z-index: 1;
	}

	.wave {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 200%;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50% 50% 0 0;
		animation: wave-move 10s linear infinite;
	}

	.wave-1 {
		animation-delay: 0s;
		opacity: 0.6;
	}

	.wave-2 {
		animation-delay: -5s;
		opacity: 0.3;
	}

	@keyframes wave-move {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}
	}
</style>